<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@ include file="/views/include/nocachehead.jsp"%>
<%@ include file="/views/include/statusbar.jsp"%>
<title>${spotInfo.name}</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/map.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/payattention.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/pagination.js"></script>

<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/comment.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.raty.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/stringutil.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/base.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/feed.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/shortMessage.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/notification.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/video.js"></script>
</head>

<script type="text/javascript">
$(document).ready(function(){
	var opts = {
  	width : 250,     // 信息窗口宽度
  	height: 100,     // 信息窗口高度
  	title : "${spotInfo.name}"  // 信息窗口标题
	}
	  var myIcon = new BMap.Icon( "http://openapi.baidu.com/map/images/custom_a_j.png",new BMap.Size(28, 37),
			  {
			     offset: new BMap.Size(10, 25),
			  imageOffset: new BMap.Size(0 - 0 * 28, 0)
			  });
	loadMap(container,new BMap.Point(${spotInfo.longitude},${spotInfo.latitude}));
	var marker = new BMap.Marker(new BMap.Point(${spotInfo.longitude},${spotInfo.latitude}) ,{icon: myIcon}); // 创建标注
	var infoWindow = new BMap.InfoWindow("<div><img title='${spotInfo.name}' width='50px' height='50px' src='${spotPortraitPath }/${spotInfo.portrait}'></div>", opts);  // 创建信息窗口对象
	marker.addEventListener("click", function(){          
	   this.openInfoWindow(infoWindow);  
	});
	addMarkerOnMap(map, marker);
});

</script>
<style type="text/css">
.mainBox1 {
	border: 1px dashed #0099CC;
	margin: 3px;
	padding: 0px;
	float: left;
	height: 800px;
	width: 700px;
}

.mainBox2 {
	border: 1px dashed #0099CC;
	margin: 3px;
	padding: 0px;
	float: left;
	height: 800px;
	width: 260px;
}

.spotView {
	border: 1px dashed #0099CC;
	margin: 3px;
	padding: 0px;
	float: left;
	height: 250px;
	width: 250px;
}

.spotStarView {
	border: 1px dashed #0099CC;
	margin: 3px;
	padding: 0px;
	float: left;
	height: 50px;
	width: 250px;
}

.spotPositionView {
	border: 1px dashed #0099CC;
	margin: 3px;
	padding: 0px;
	float: left;
	height: 100px;
	width: 250px;
}

.adminview {
	border: 1px dashed #0099CC;
	margin: 3px;
	padding: 0px;
	float: left;
	height: 120px;
	width: 250px;
}

.introductionView {
	border: 1px dashed #0099CC;
	margin: 3px;
	padding: 0px;
	float: left;
	height: 100px;
	width: 250px;
}

.fansView {
	border: 1px dashed #0099CC;
	margin: 3px;
	padding: 0px;
	float: left;
	height: 30px;
	width: 250px;
}

.starclass {
	font: 10px verdana;
}

#bodyDiv {
	position: relative;
	top: 42px;
	width: 960px;
	min-height: 500px;
	height: auto !important;
	margin: 0 auto;
}

#woOwnerDiv {
	float: right;
	width: 240px;
	height: 500px;
	background: #ffff;
	left: 10px;
}

#content {
	float: left;
	width: 720px;
	min-height: 500px;
	background: #ffff;
}

hr {
	boder: 1px dashed #cccccc;
}
</style>

<body>
	<br>
	<br>
	<div class="mainBox1" id="container"></div>
	<div class="mainBox2">
		<div class="spotPositionView">
			<a>${spotInfo.name }</a><br>
			<p>位置：</p>
			<a class="countryTag"
				href="${pageContext.request.contextPath}/spot/country/${spotInfo.siteId}/list.html">${spotInfo.country}</a>
			<em class="provinceTag">›</em> <a class="provinceTag"
				href="${pageContext.request.contextPath}/spot/province/${spotInfo.siteId}/list.html">${spotInfo.province}</a><em
				class="provinceTag">›</em> <a class="provinceTag"
				href="${pageContext.request.contextPath}/spot/city/${spotInfo.siteId}/list.html">${spotInfo.city}</a><em
				class="detailTag">›</em> <a class="detailTag">${spotInfo.detailAddress}</a>
		</div>
		<div class="spotView">
			<img title="${spotInfo.name}" width="240px" height="240px"
				src="${spotPortraitPath }/${spotInfo.portrait}">
		</div>

	</div>
</body>
</html>